<!--
* description: 范围选择
* author: wangml
* createdDate: 2021
-->
<template>
  <el-col v-show="curIsShow" :key="fullComponentKey" :span="span">
    <lableName
      :validrule="validrule"
      :cur-label-name="curLabelName"
      :is-show-label="isShowLabel"
      :is-require="isRequire"
      :curis-func="curisFunc"
      :max-word-count="dataToObject==null ? 6 :dataToObject.maxWordCount"
      :label-width="labelWidth"
      @clickEvent="sendLabelCode"
    />
    <!--    <el-input-->
    <!--      v-show="curIsShowComp"-->
    <!--      v-model="modelCode"-->
    <!--      :placeholder="placeholder"-->
    <!--      :disabled="curDisabled"-->
    <!--      :readonly="readonly"-->
    <!--      size="small"-->
    <!--      :is-empty="dataToObject==null ?false :dataToObject.empty"-->
    <!--      :maxlength="dataToObject==null ? null :dataToObject.maxLength"-->
    <!--      :suffix-icon="suffixIcon"-->
    <!--      :clearable="clearable"-->
    <!--      :type="inputType"-->
    <!--      :style="{'width': (labelWidth !== 80 ? `calc(100% - ${labelWidth}px)`: '')}"-->
    <!--      @clear="clearCode"-->
    <!--      @change="sendCode"-->
    <!--      @input="inputCode"-->
    <!--      @blur="inputBlur"-->
    <!--    />-->
    <!--    <span v-show="!curIsShowComp" @click="showCompByClick(true)">{{ modelCode }}</span>-->
    <el-slider
      ref="rangeSlider"
      v-show="curIsShowComp"
      v-model="modelCode"
      range
      style="float: left;width: 65%"
      :step="step"
      :format-tooltip="formatTooltip"
      :marks="marks"
      @change="sendCode"
    />
    <validateFormate :cur-label-name="curLabelName" :validrule="validrule" />
  </el-col>
</template>
<script>
import { inputMixins } from '@/components/mixins/inputMixins'
export default {
  components: {
    lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    validateFormate: () => import('@/components/validateFormate') // 校验提示样式组件
  },
  mixins: [inputMixins],
  props: {
  },
  data() {
    return {
      // 滑动步长
      step: 0.1,
      marks: {
        0: '0%',
        30: '30%',
        60: '60%',
        100: '100%'
      }
    }
  },
  watch: {
    // 'curDisabled': {
    //   handler(disabled) {
    //     disabled ? this.placeholder = '' : this.placeholder = this.$t('sys.tips.esTip13')
    //   }
    // }
  },
  mounted() {
    // this.curDisabled ? this.placeholder = '' : this.placeholder = this.$t('sys.tips.esTip13')
    // const self = this
    // let sliderDiv = this.$refs['rangeSlider'].$el
    // let btns = this.$(sliderDiv).find('.el-tooltip.el-slider__button')
    // this.$(document).keydown(function (event) {
    //   // 左建 37  右键 39
    //   console.log(event.keyCode)
    //   if (event.keyCode === 37) {
    //     self.modelCode[1] -= this.step
    //   } else if (event.keyCode === 39) {
    //     self.modelCode[0] += this.step
    //   }
    // })

  },
  methods: {
    formatTooltip(val) {
      return val + '%'
    }
  }
}
</script>
